<template>
    <div class="login-continal" :style="{height: orderHight+'px'}">
        <p class="back mintui mintui-back" @click="goBack">返回</p>
        <div class="mui-content">
            <h3>账号登录</h3>
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>账号：</label>
					<input id='account' type="text" class="mui-input-clear mui-input" v-model="mobile" placeholder="请输入您的邮箱 / 手机号">
				</div>
				<div class="mui-input-row">
					<label>密码：</label>
					<input id='password' type="password" class="mui-input-clear mui-input" v-model="pwd" placeholder="请输入密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary" @click="login">登录</button>
				<div class="link-area"><routerLink id='reg' to="/member/reg">注册账号</routerLink><routerLink id='forgetPassword'  to="/member/forgetpwd">忘记密码</routerLink>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderHight: 0,
                mobile: '',
                pwd: ''
            }
        },
        created() {
            this.orderHight = (document.documentElement.clientHeight || document.body.clientHeight);
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
           login() {
               let user = { mobile: this.mobile, pwd: this.pwd, deviceId: 0, deviceName: 0 }
               this.$store.dispatch('login', user)
           } 
        },
        watch: {
            "$store.state.status": function(newVal) {
                if(newVal === 'success') {
                    this.$toast('登陆成功')
                    this.$router.push('/member')
                }else {
                    this.$toast(newVal)
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
.login-continal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: -webkit-linear-gradient(#26a2ff,#e7a1eb); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(#26a2ff,#e7a1eb); /* Opera 11.1-12.0 */ 
    background: -moz-linear-gradient(#26a2ff,#e7a1eb); /* Firefox 3.6-15 */
    background:liner-gradient(#26a2ff,#e7a1eb);
    .mui-content{
        width: 85%;
        margin: 0 auto;
        border-radius: 10px;
        background-color:rgba(255,255,255,.3);
        h3{
            text-align: center;
            padding: 15px 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .mui-input-group{
            background-color: transparent;
            .mui-input-row{
                width: 85%;
                margin: 0 auto;
                border-bottom: 1px solid #fff;
            }
            label{
                font-size: 14px;
                color: #fff;
                width: 30%;
                line-height: 21px;
                padding: 10px 0;
                text-align: center;
            }
            input{
                width: 70%;
                font-size: 14px;
                color: #fff;
            }
        }
        .mui-btn-block{
            font-size: 16px;
            padding: 8px 0;
            width: 90%;
            margin: 20px auto;
            background-color: #26a2ff;
            border: none;
        }
        .link-area{
            display: flex;
            justify-content: space-between;
            width: 90%;
            margin: 0 auto;
            color: #fff;
            a{
                font-size: 14px;
                color: #fff
            }
        }
        
    }
    .mui-input-group:before,.mui-input-group:after,.mui-input-group .mui-input-row:after{
        background-color: transparent;
    }
    .back{
        font-size: 14px;
        color: #fff;
        position: absolute;
        top: 20px;
        left: 5%;
    }
}
</style>